<template>
  <div id="taxiBottom" ref="taxibottom">
    <div class="sharecover" v-show="Issharecover" @click="sharecoverBtn"></div>
    <!--二维码分享-->
    <div class="code_box" v-show="Iscodebox">
      <div ref="qrcode" class="qrcode"></div>
      <p class="qrcode_text">长按二维码进行分享</p>
    </div>
    <!--微信分享-->
    <div v-show="Issharebox" class="share_box">
      <img src="@/assets/imgs/share_right.png" />
      <p>点击右上角按钮发送给微信好友或分享到微信朋友圈</p>
    </div>
    <div class="taxi_back_box">
      <p v-if="IsTitle">
        <md-icon class="back_btn" name="snyc_nav_fh" @click="goBack()"></md-icon>
      </p>
    </div>
    <div class="taxiBottom_bg">
      <p class="safe_box">
        <span @click="safeBtn" v-show="IssafeBtn" class="safe_box_img">
          <img src="@/assets/imgs/safe_icon@2x.png" />
        </span>
        <span @click="dingweiBtn" v-show="IsdingweiBtn" class="dingwei_img">
          <img src="@/assets/imgs/dingwei@2x.png" />
        </span>
      </p>
      <div style="clear:both"></div>
      <div class="taxi_bg" v-show="getTaxiBottomType==0">
        <!--开始下单-->
        <div class="tripTabs">
          <md-tab-bar :titles="tripTabs" class="taxibottom_tab" @indexChanged="tripBtn"></md-tab-bar>
        </div>
        <div>
          <ul class="orderinformation_list">
            <li v-show="appointment" @click="getappointmentTime">
              <md-icon name="snkc_xcqx_time" slot="left" class="snkc_xcqx_time"></md-icon>
              <span>{{appointmentTime}}</span>
            </li>
            <li @click="selectStart">
              <md-icon class="place_icon" name="shangchedian" slot="left"></md-icon>
              <span v-if="taxiStartPosition.start_pst">{{taxiStartPosition.start_pst}}</span>
              <span v-else class="address_color">从哪出发</span>
            </li>
            <li @click="selectEnd">
              <md-icon class="place_icon" name="xiachedian" slot="left"></md-icon>
              <span v-if="taxiEndPosition.end_pst">{{taxiEndPosition.end_pst}}</span>
              <span v-else class="address_color">你要去哪儿</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="taxi_bg" v-show="getTaxiBottomType==1">
        <!--呼叫出租车-->
        <div class="taxi_list_box">
          <div class="taxi_list" :class="{ative:carTypeStyle==index}" v-for="(item,index) in getTtaxiDoOrderData" :key="index" @click="getCardType(item,index)">
            <h5>{{item.innerTypeName}}</h5>
            <p class="taxi_img">
              <img src="@/assets/imgs/czc_icon@2x.png" />
            </p>
            <h6>{{item.priceText}}</h6>
            <p v-if="item.couponType==1" class="taxi_coupon_text">
              券可抵
              <span>{{item.couponPrice}}</span>元
            </p>
            <p v-if="item.couponType==2" class="taxi_coupon_text">有可用优惠券</p>
            <p v-if="item.couponType==3" class="taxi_coupon_text"></p>
          </div>
        </div>
        <div class="taxi_list_box">
          <p class="appointment_taxi_time" @click="getappointmentTime">
            <md-icon name="snkc_xcqx_time" slot="left" class="snkc_xcqx_time"></md-icon>
            {{appointmentTime}}
          </p>
          <p class="red_money" @click="setRedMoneyBtn">
            <img src="@/assets/imgs/hb_icon@2x.png" />
            <span>红包</span>
            <b v-if="redMoney">{{redMoney}}元</b>
          </p>
        </div>
        <!-- <p class="appointment_taxi_time" @click="getappointmentTime" v-if="taxiType==2">
                    <md-icon name="snkc_xcqx_time" slot="left" class="snkc_xcqx_time"></md-icon>
                    {{appointmentTime}}
        </p>-->
        <!-- <p v-if="taxiValuationType==1" class="taxi_meter_valuation">打表计价</p>
                <p v-if="taxiValuationType==2" class="taxi_meter_valuation">一口价{{fixedPrice}}元</p>
                <p class="taxi_img">
                    <img src="@/assets/imgs/czc_icon@2x.png">
                </p>
                <p class="taxi_type" v-if="taxiValuationType==3">
                    <span @click="gettaxiTypePrice">
                        <i :class="{active:taxiValuationNumber == '2'}"></i>
                        <b>一口价{{fixedPrice}}元</b>
                    </span>
                    <span @click="gettaxiTypeValuation">
                        <i :class="{active:taxiValuationNumber == '1'}"></i>
                        <b>打表计价</b>
                    </span>
        </p>-->
        <!-- <p class="red_money" @click="setRedMoneyBtn">
                    <img src="@/assets/imgs/hb_icon@2x.png">
                    <span>红包</span>
                    <b v-if="redMoney">{{redMoney}}元</b>
        </p>-->
        <p class="taxi_btn" @click="callTaxi">呼叫出租车</p>
      </div>
      <div class="taxi_bg" v-show="getTaxiBottomType==2 || getTaxiBottomType==3">
        <!--订单信息-->
        <div v-show="IsTaxiOrder">
          <!--待派单-->
          <p class="appointment_taix_wait_time" v-if="taxiType==2">
            <span>{{orderAppointmentTime}}</span>出发
          </p>
          <p class="taix_wait_text" v-if="getDriverCard">正在通知附近出租车,请耐心等待司机抢单</p>
          <p class="taix_wait_text" v-else>正在寻找附近出租车,请耐心等待</p>
          <p class="taix_wait_type">已等待</p>
          <p class="taix_wait_time">{{taxiExpiredTime}}</p>
          <p class="taix_wait_no" v-if="taxiType==2">预约{{getTaxiOrderInfoData?getTaxiOrderInfoData.close_times:""}}分钟后若无司机接单，将自动关闭订单</p>
          <p class="taix_wait_no" v-if="taxiType==1">等待{{getTaxiOrderInfoData?getTaxiOrderInfoData.close_times:""}}分钟后若无司机接单，将自动关闭订单</p>
          <p class="taix_wait_list">
            <span @click="cancelTaxiResponsibility">
              <img src="@/assets/imgs/quxiao@2x.png" />取消订单
              <em></em>
            </span>
            <span @click="modifyRedMoney">
              <img src="@/assets/imgs/hb_icon@2x.png" />红包
              <b v-if="redMoney">{{redMoney}}元</b>
            </span>
          </p>
        </div>
        <!--司机信息-->
        <div v-show="IsTaxiDriver">
          <div v-show="taxiStatus==1">
            <!--待接驾-->
            <p class="appointment_taix_wait_time" v-if="taxiType==2">
              <span>{{orderAppointmentTime}}</span>出发
            </p>
            <p class="taxi_djj_hd">司机师傅已接单</p>
            <p class="taxi_djj_text">
              若行程有变，您可以在
              <span>{{cancelTime}}</span>前取消，司机开始接驾后可查询司机的状态
            </p>
          </div>
          <div v-show="taxiStatus==2">
            <!--接驾中-->
            <p class="taxi_djj_hd">司机师傅已接单,正在火速赶来</p>
            <p class="taxi_djj_text">
              若行程有变，您可以在
              <span>{{cancelTime}}</span>前取消
            </p>
          </div>
          <div v-show="taxiStatus==3">
            <!--已接驾-->
            <p class="taxi_djj_hd">司机师傅已到达</p>
            <p class="taxi_djj_text" v-if="taxiType==1">
              请您在
              <span>{{meetedDate}}</span>前上车，若您迟到，司机可能取消订单，影响您的出行。
            </p>
            <p class="taxi_djj_text" v-if="taxiType==2">
              请您在
              <span>{{appointmentmeetedDate}}</span>前上车，若您迟到，司机可能取消订单，影响您的出行。
            </p>
          </div>
          <div v-show="taxiStatus==4">
            <!--行程中-->
            <p class="taxi_djj_hd">行程中</p>
            <p class="taxi_djj_text">行程已开始，请系好安全带，祝您旅途愉快！</p>
          </div>
          <div v-show="taxiStatus==5">
            <!--行程结束-->
            <p class="taxi_djj_hd" v-show="payStatus!=0">行程结束</p>
          </div>
          <div class="taxi_driver_box">
            <div class="taxi_driver_box_left">
              <p v-if="driverImg">
                <img :src="driverImg" />
              </p>
              <p v-else>
                <img src="@/assets/imgs/snyc_tx.png" />
              </p>
            </div>
            <div class="taxi_driver_box_center">
              <p class="taxi_driver_text">
                <span>{{driverName}}</span>
                <b>{{driverCarNumber}}</b>
                <em>
                  <i>{{driverServiceNumber}}</i>单
                </em>
              </p>
              <p class="taxi_company_text">{{getDriverCompany}}</p>
            </div>
            <div class="taxi_driver_box_right">
              <p>
                <!-- <span><img src="@/assets/imgs/snyc_jjz_tel.png"></span> -->
                <span @click="callDriver" v-if="taxiStatus!=5">
                  <img src="@/assets/imgs/phone_ico.png" />
                </span>
                <span v-else>
                  <img src="@/assets/imgs/snyc_jjz_tel_no.png" />
                </span>
              </p>
            </div>
          </div>
          <div v-show="taxiStatus==4">
            <div class="endOrder_bottom" style="border-top:none">
              <ul>
                <li @click="callCustomer">
                  <md-icon name="kefu_icon" slot="left" class="quxiao_icon"></md-icon>联系客服
                </li>
                <li @click="TaxishareBtn">
                  <md-icon name="share_icon" slot="left" class="quxiao_icon"></md-icon>分享行程
                </li>
              </ul>
            </div>
          </div>
          <div v-show="taxiStatus==5">
            <div v-show="payStatus==0">
              <!--等待司机确认价格 未支付-->
              <p class="taxi_driver_comfirm">等待司机确认价格</p>
              <div class="endOrder_bottom">
                <ul>
                  <li @click="callCustomer">
                    <md-icon name="kefu_icon" slot="left" class="quxiao_icon"></md-icon>联系客服
                  </li>
                  <li @click="TaxishareBtn">
                    <md-icon name="share_icon" slot="left" class="quxiao_icon"></md-icon>分享行程
                  </li>
                </ul>
              </div>
            </div>
            <div v-show="payStatus==1">
              <!--行程结束等待支付-->
              <p class="taxi_alt">
                ￥
                <span>{{lastOrderAmt}}</span>
                <md-icon name="wdqb-more" slot="left" class="wdqb_more" @click="taxiCost"></md-icon>
              </p>
              <p class="taxi_coupon" v-show="Iscoupon==1" @click="getCoupon">
                原价{{orderAmt}}元,优惠券已抵
                <span>{{favourable}}</span>元
                <md-icon name="wdqb-more" slot="left" class="quxiao_icon"></md-icon>
              </p>
              <p class="taxi_coupon" v-show="Iscoupon==2" @click="getCoupon">
                有可用优惠券
                <md-icon name="wdqb-more" slot="left" class="quxiao_icon"></md-icon>
              </p>
              <p class="taxi_coupon" v-show="Iscoupon==3">无可用优惠券</p>
              <p class="taxi_cost_text" @click="costError">费用有误，通知司机</p>
              <div class="endOrder_bottom">
                <ul>
                  <li @click="callCustomer">
                    <md-icon name="kefu_icon" slot="left" class="quxiao_icon"></md-icon>联系客服
                  </li>
                  <li @click="TaxishareBtn">
                    <md-icon name="share_icon" slot="left" class="quxiao_icon"></md-icon>分享行程
                  </li>
                </ul>
              </div>
              <p class="taxi_pay" @click="pullUpPay">支付</p>
            </div>
            <div v-show="payStatus==2">
              <!--行程结束已支付-->
              <p class="taxi_alt">
                ￥
                <span>{{lastOrderAmt}}</span>
              </p>
              <p class="taxi_coupon">
                费用明细
                <md-icon name="wdqb-more" slot="left" class="quxiao_icon" @click="taxiCost"></md-icon>
              </p>
              <div class="endOrder_bottom">
                <ul>
                  <li @click="callCustomer">
                    <md-icon name="kefu_icon" slot="left" class="quxiao_icon"></md-icon>联系客服
                  </li>
                  <li @click="TaxishareBtn">
                    <md-icon name="share_icon" slot="left" class="quxiao_icon"></md-icon>分享行程
                  </li>
                </ul>
              </div>
              <p class="taxi_evaluate" v-if="Isevaluate" @click="goTaxiEvaluate">
                评价本次服务
                <md-icon name="wdqb-more" slot="left" class="quxiao_icon"></md-icon>
              </p>
              <p class="taxi_evaluate" v-else @click="seeTaxiEvaluate">
                查看评价
                <md-icon name="wdqb-more" slot="left" class="quxiao_icon"></md-icon>
              </p>
            </div>
          </div>
          <div class="orderinformation_bottom" v-show="taxiBottomText">
            <ul>
              <li @click="TaxishareBtn">
                <md-icon name="share_icon" slot="left" class="quxiao_icon"></md-icon>分享行程
              </li>
              <li @click="callCustomer">
                <md-icon name="kefu_icon" slot="left" class="quxiao_icon"></md-icon>联系客服
              </li>
              <li @click="cancelTaxiResponsibility">
                <md-icon name="quxiao_icon" slot="left" class="quxiao_icon"></md-icon>取消订单
              </li>
            </ul>
          </div>
        </div>
        <div v-show="taxiStatus==6">
          <!--订单已关闭-->
          <p class="taxi_order_close_img">
            <img src="@/assets/imgs/tishi@2x.png" />
          </p>
          <p class="taxi_order_close_hd">订单已关闭</p>
          <p class="taxi_order_close_text">系统自动关闭</p>
        </div>
        <div v-show="taxiStatus==7">
          <!--订单取消-->
          <p class="taxi_order_close_img">
            <img src="@/assets/imgs/tishi@2x.png" />
          </p>
          <div v-show="duty==0">
            <p class="taxi_order_close_hd">订单取消无责</p>
            <p class="taxi_order_close_text">乘客已取消行程</p>
          </div>
          <div v-show="duty==1">
            <p class="taxi_order_close_hd">订单取消无责</p>
            <p class="taxi_order_close_text">司机已取消行程</p>
          </div>
          <div v-show="duty==2">
            <div v-show="canclerType==1">
              <p class="taxi_order_close_hd">订单取消有责</p>
              <p class="taxi_order_close_text">
                乘客已取消行程，本次取消您当日的有责取消机会
                <span>-1</span>
              </p>
            </div>
            <div v-show="canclerType==0">
              <p class="taxi_order_close_hd">订单取消有责</p>
              <p class="taxi_order_close_text">
                司机已取消行程，本次取消您当日的有责取消机会
                <span>-1</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import '@/assets/svgs/snkc_xcqx_time.svg';
import '@/assets/svgs/share_icon.svg';
import '@/assets/svgs/kefu_icon.svg';
import '@/assets/svgs/quxiao_icon.svg';
import '@/assets/svgs/wdqb-more.svg';
import '@/assets/svgs/snyc_nav_fh.svg';
import types from './types';
import { Field, FieldItem, Icon, TabBar, Toast, InputItem, Dialog } from 'mand-mobile';
import QRCode from 'qrcodejs2';
import weixinUtils from '@/common/weixinUtils';
import Popup from './popup';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'taxibottom',
  components: {
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Icon.name]: Icon,
    [TabBar.name]: TabBar,
    [Toast.name]: Toast,
    [TopBar.name]: TopBar,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '出租车',
      IsTitle: '',
      IsTaxiOrder: false,
      IsTaxiDriver: true,
      IsdingweiBtn: true,
      payStatus: '', // 支付状态
      Isevaluate: true, // 是否评价
      taxiType: '1', // 订单类型 1 实时单 2 预约单
      taxiStatus: '', // 订单在页面显示状态
      taxiBottomText: true,
      taxiValuationType: '', // 计价方式显示状态 1 打表计价  2 一口价  3 一口价和打表
      taxiValuationNumber: '1', // 计价方式 1 打表计价 2 一口价
      fixedPrice: '0.00', // 一口价
      redMoney: '', // 红包
      tripTabs: ['现在', '预约'],
      appointment: false, // 是否预约
      appointmentTime: '预约时间', // 预约时间
      orderAppointmentTime: '',
      appointmentTimeStamp: '', // 预约时间戳
      driverName: '', // 司机姓名
      driverImg: '', // 司机头像
      driverCarNumber: '', // 司机车牌号
      driverServiceNumber: '', // 司机接单次数
      lastOrderAmt: '', // 订单最终金额
      orderAmt: '', // 订单金额
      favourable: '', // 优惠券抵用金额
      Iscoupon: '', // 是否有优惠券
      taxiOrderTimer: null,
      taxiExpiredTime: '',
      duty: '', // 是否有责 0 无责 1 司机有责 2 乘客有责
      canclerType: '',
      IssafeBtn: false,
      startPositionUnwatcher: null,
      endPositionUnwatcher: null,
      shareTripUrl: '',
      Iscodebox: false,
      Issharebox: false,
      Issharecover: false,
      qrcode: '',
      source: '',
      carTypeStyle: 0 // 选中用车类型样式
    };
  },
  created() {
    console.log('初始化Bottom，当前Bottom状态：', this.getTaxiBottomType);
    let self = this;
    let onPopState = function(e) {
      self.onPopState();
    };
    window.addEventListener('popstate', onPopState);
    if (this.getTaxiBottomType === '0') {
      sessionStorage.removeItem('appointmentTimeStamp');
      sessionStorage.removeItem('appointmentTime');
      sessionStorage.removeItem('taxiType');
    } else {
      this.appointmentTimeStamp = sessionStorage['appointmentTimeStamp'];
      this.appointmentTime = sessionStorage['appointmentTime'] || '预约时间';
    }
    if (this.$route.name === 'taxi') {
      this.IsTitle = true;
    } else {
      this.IsTitle = false;
    }
    // if (sessionStorage['taxiType'] === '2') {
    //     this.taxiType = '2';
    // }
    // 选择预约时间后 是否选择了时间
    if (sessionStorage['taxiType'] === '2') {
      if (this.appointmentTime === '预约时间') {
        this.appointmentTime = '现在';
        sessionStorage['taxiType'] = '1';
        this.taxiType = '2';
      } else {
        sessionStorage['taxiType'] = '2';
        this.taxiType = '2';
      }
    } else {
      this.appointmentTime = '现在';
    }
    // 根据订单号获取订单详情
    if (this.$route.query.orderno) {
      this.getTaxiOrder(this.$route.query.orderno);
    } else {
      this.startPositionUnwatcher = this.$watch('taxiStartPosition', newVal => {
        this.taxiList();
      });
      this.endPositionUnwatcher = this.$watch('taxiEndPosition', newVal => {
        this.taxiList();
      });
    }
    if (this.getTtaxiDoOrderData) {
      this.fixedPrice = decryptByDESModeEBC(this.getTtaxiDoOrderData[0].price);
      if (this.getTtaxiDoOrderData[0].innerType === '4') {
        this.taxiValuationNumber = '2';
      } else {
        this.taxiValuationNumber = '1';
      }
    }
  },
  beforeDestroy() {
    let self = this;
    let onPopState = function(e) {
      self.onPopState();
    };
    console.log('销毁bottom，当前状态：', this.getTaxiBottomType);
    clearInterval(this.taxiOrderTimer);
    this.taxiOrderTimer = null;
    window.removeEventListener('popstate', onPopState);
  },
  methods: {
    ...mapActions(['getTaxiOrderInfo', 'getCallTaxi', 'getappointment', 'getRedMoney', 'getModifyRedMoney']),
    goBack() {
      clearInterval(this.taxiOrderTimer);
      if (this.$route.query.backtype === '1') {
        this.$store.commit('setTaxiBottomType', '0');
        this.$store.commit('resetTaxi');
        this.$router.replace({
          name: 'MyAllot'
        });
      } else if (this.$route.query.orderno) {
        this.$store.commit('setTaxiBottomType', '0');
        this.$store.commit('resetTaxi');
        this.$router.replace({
          name: 'homeTaxi'
        });
      } else {
        this.$store.commit('setTaxiBottomType', '0');
        this.$store.commit('resetTaxi');
        this.$store.commit('resetTaxiEndPosition');
        this.$router.go(-1);
      }
    },
    // 出租车类型列表
    taxiList() {
      if (this.taxiStartPosition.start_lnglat === '' || this.taxiEndPosition.end_lnglat === '') {
        return false;
      }
      let params = {
        startLnglat: encryptByDESModeEBC(this.taxiStartPosition.start_lnglat), // 起点经纬度
        endLnglat: encryptByDESModeEBC(this.taxiEndPosition.end_lnglat), // 终点经纬度
        redMoney: this.redMoney
      };
      this.$store
        .dispatch('taxiGetDoOrder', params)
        .then(() => {
          this.$router.push({
            name: 'taxi'
          });
          this.$store.commit('setTaxiBottomType', '1');
        })
        .catch(error => {
          Dialog.alert({
            title: '提示',
            content: error.message,
            confirmText: '确定'
          });
          this.$store.commit('setTaxiEndPosition', {
            // 出租车目的地信息
            end_pst: '',
            end_pst_detail: '',
            end_lnglat: ''
          });
        });
    },
    // 选择出租车类型
    getCardType(item, index) {
      var innerType = item.innerType;
      this.carTypeStyle = index;
      this.fixedPrice = decryptByDESModeEBC(item.price);
      if (innerType === '3') {
        this.taxiValuationNumber = '1';
      } else if (innerType === '4') {
        this.taxiValuationNumber = '2';
      }
    },
    // 出租车下单
    callTaxi() {
      // if (sessionStorage['taxiType'] === '2') {
      //     if (this.appointmentTime === '预约时间' || this.appointmentTime === '') {
      //         Toast({
      //             content: '请选择预约时间',
      //             duration: 3000,
      //             hasMask: true
      //         });
      //         return;
      //     }
      // }
      if (Utils.getCurrentEnv() === 'wx') {
        // 微信
        this.source = '4';
      } else if (Utils.getCurrentEnv() === 'mini') {
        // 小程序
        this.source = '5';
      } else if (Utils.getCurrentEnv() === 'h5') {
        // H5
        this.source = '6';
      }
      let params = {
        type: sessionStorage['taxiType'] || '1', // 订单类型
        start_pst: this.taxiStartPosition.start_pst, // 起点位置
        start_pst_detail: this.taxiStartPosition.start_pst_detail, // 起点详细位置
        start_lnglat: encryptByDESModeEBC(this.taxiStartPosition.start_lnglat), // 起点经纬度
        end_pst: this.taxiEndPosition.end_pst, // 终点位置
        end_pst_detail: this.taxiEndPosition.end_pst_detail, // 终点详细位置
        end_lnglat: encryptByDESModeEBC(this.taxiEndPosition.end_lnglat), // 终点经纬度
        expect_date: this.appointmentTimeStamp, // 预约时间戳
        reward_money: this.redMoney, // 红包金额
        price_model: this.taxiValuationNumber, // 计价方式
        fixed_price: encryptByDESModeEBC(this.fixedPrice), // 一口价金额
        source: this.source
      };
      this.getCallTaxi(params)
        .then(() => {
          this.getTaxiOrder(this.getCallTaxiData.order_no);
          this.$router.replace({
            name: 'taxi',
            query: {
              orderno: this.getCallTaxiData.order_no
            }
          });
          if (this.startPositionUnwatcher) {
            this.startPositionUnwatcher();
            this.endPositionUnwatcher();
          }
        })
        .catch(error => {
          let str = error.toString().split(':');
          let code = str[1].trim();
          let msgText = str[2];
          if (code === '250250') {
            Dialog.alert({
              title: '提示',
              content: '当前选择时间已超时，请重新选择预约时间后提交订单',
              confirmText: '确定'
            });
          }
        });
    },
    getTaxiOrder(orderno) {
      this.getTaxiOrderInfo(orderno).then(() => {
        this.$store.commit('setTaxiBottomType', '2');
        // 订单状态
        if (this.getTaxiOrderInfoData.order_status === '1') {
          // 待派单
          // this.taxiOrderTimer = setInterval(() => {
          //     let time = (new Date().getTime() - parseInt(this.getTaxiOrderInfoData.create_date)) / 1000;
          //     if (time < parseInt(this.getTaxiOrderInfoData.close_times) * 60) {
          //         let minutes = Math.floor(time / 60) > 9 ? Math.floor(time / 60) : '0' + Math.floor(time / 60);
          //         let seconds = Math.floor(time % 60) > 9 ? Math.floor(time % 60) : '0' + Math.floor(time % 60);
          //         this.taxiExpiredTime = minutes + ':' + seconds;
          //     } else {
          //         clearInterval(this.taxiOrderTimer);
          //         this.taxiExpiredTime = this.getTaxiOrderInfoData.close_times + ':00';
          //         sessionStorage.removeItem('appointmentTimeStamp');
          //         sessionStorage.removeItem('appointmentTime');
          //         sessionStorage.removeItem('taxiType');
          //         this.taxiOrderClose();
          //     }
          // }, 1000);
          this.taxiOrderTimer = setInterval(() => {
            let time = (new Date().getTime() - parseInt(this.getTaxiOrderInfoData.create_date)) / 1000;
            let minutes = Math.floor(time / 60) > 9 ? Math.floor(time / 60) : '0' + Math.floor(time / 60);
            let seconds = Math.floor(time % 60) > 9 ? Math.floor(time % 60) : '0' + Math.floor(time % 60);
            this.taxiExpiredTime = minutes + ':' + seconds;
          }, 1000);
          this.IsTaxiOrder = true;
          this.IsTaxiDriver = false;
          this.$store.commit('setTaxiOrderStatus', '1'); // 订单状态
        } else if (this.getTaxiOrderInfoData.order_status === '2') {
          // 待接驾 司机已接单
          this.IsTaxiOrder = false;
          this.IsTaxiDriver = true;
          this.taxiStatus = '1';
          this.$store.commit('setTaxiOrderStatus', '2'); // 订单状态
          clearInterval(this.taxiOrderTimer);
        } else if (this.getTaxiOrderInfoData.order_status === '3') {
          // 接驾中
          this.IsTaxiOrder = false;
          this.IsTaxiDriver = true;
          this.taxiStatus = '2';
          this.$store.commit('setTaxiOrderStatus', '3'); // 订单状态
          clearInterval(this.taxiOrderTimer);
        } else if (this.getTaxiOrderInfoData.order_status === '4') {
          // 司机已到达
          this.IsTaxiOrder = false;
          this.IsTaxiDriver = true;
          this.taxiStatus = '3';
          this.$store.commit('setTaxiOrderStatus', '4'); // 订单状态
          clearInterval(this.taxiOrderTimer);
        } else if (this.getTaxiOrderInfoData.order_status === '5') {
          // 行程中
          this.IsTaxiOrder = false;
          this.IsTaxiDriver = true;
          this.taxiStatus = '4';
          this.$store.commit('setTaxiOrderStatus', '5'); // 订单状态
          this.taxiBottomText = false;
          clearInterval(this.taxiOrderTimer);
        } else if (this.getTaxiOrderInfoData.order_status === '6') {
          // 已完成
          this.IsTaxiOrder = false;
          this.IsTaxiDriver = true;
          this.taxiStatus = '5';
          this.$store.commit('setTaxiOrderStatus', '6'); // 订单状态
          this.taxiBottomText = false;
          clearInterval(this.taxiOrderTimer);
          // 支付状态
          if (this.getTaxiOrderInfoData.pay_status === '0') {
            // 未支付
            this.payStatus = '0';
          } else if (this.getTaxiOrderInfoData.pay_status === '1') {
            // 待支付
            this.payStatus = '1';
          } else if (this.getTaxiOrderInfoData.pay_status === '2') {
            // 已支付
            this.payStatus = '2';
            this.$store.commit('setTaxiBottomType', '3'); // 支付已完成
            // 评价状态
            if (this.getTaxiOrderInfoData.evaluate_status === '0') {
              // 未评价
              this.Isevaluate = true;
            } else if (this.getTaxiOrderInfoData.evaluate_status === '1') {
              // 已评价
              this.Isevaluate = false;
            }
          }
          sessionStorage.removeItem('appointmentTimeStamp');
          sessionStorage.removeItem('appointmentTime');
        } else if (this.getTaxiOrderInfoData.order_status === '7') {
          // 取消订单
          this.IsTaxiOrder = false;
          this.IsTaxiDriver = false;
          this.taxiStatus = '7';
          this.$store.commit('setTaxiOrderStatus', '7'); // 订单状态
          sessionStorage.removeItem('appointmentTimeStamp');
          sessionStorage.removeItem('appointmentTime');
          clearInterval(this.taxiOrderTimer);
        } else if (this.getTaxiOrderInfoData.order_status === '8') {
          // 订单已关闭
          this.IsTaxiOrder = false;
          this.IsTaxiDriver = false;
          this.taxiStatus = '6';
          this.$store.commit('setTaxiOrderStatus', '8'); // 订单状态
          sessionStorage.removeItem('appointmentTimeStamp');
          sessionStorage.removeItem('appointmentTime');
          clearInterval(this.taxiOrderTimer);
        } else if (this.getTaxiOrderInfoData.order_status === '9') {
          // 现金支付
          this.IsTaxiOrder = false;
          this.IsTaxiDriver = true;
          this.taxiStatus = '5';
          this.$store.commit('setTaxiOrderStatus', '9'); // 订单状态
          this.taxiBottomText = false;
          this.payStatus = '2';
          this.$store.commit('setTaxiBottomType', '3'); // 支付已完成
          // 评价状态
          if (this.getTaxiOrderInfoData.evaluate_status === '0') {
            // 未评价
            this.Isevaluate = true;
          } else if (this.getTaxiOrderInfoData.evaluate_status === '1') {
            // 已评价
            this.Isevaluate = false;
          }
          clearInterval(this.taxiOrderTimer);
        }
        console.log(this.getTaxiOrderInfoData);
        this.driverImg = this.getTaxiOrderInfoData.driver_image;
        this.driverName = this.getTaxiOrderInfoData.driver_name;
        this.driverCarNumber = this.getTaxiOrderInfoData.tx_car_plate_number;
        this.driverServiceNumber = this.getTaxiOrderInfoData.service_num;
        this.lastOrderAmt = decryptByDESModeEBC(this.getTaxiOrderInfoData.last_order_amt);
        this.orderAmt = decryptByDESModeEBC(this.getTaxiOrderInfoData.order_amt);
        this.redMoney = this.getTaxiOrderInfoData.reward_money;
        if (this.getTaxiOrderInfoData.type === '3') {
          // 电话实时约单
          this.taxiType = '1';
        } else if (this.getTaxiOrderInfoData.type === '4') {
          // 电话预约单
          this.taxiType = '2';
        } else {
          this.taxiType = this.getTaxiOrderInfoData.type;
        }
        this.canclerType = this.getTaxiOrderInfoData.cancler_type;
        var orderStatus = this.getTaxiOrderInfoData.order_status;
        if (orderStatus === '2' || orderStatus === '3' || orderStatus === '4' || orderStatus === '5' || orderStatus === '6') {
          this.IssafeBtn = true;
        } else if (orderStatus === '7') {
          if (this.getTaxiOrderInfoData.driver_name) {
            this.IssafeBtn = true;
          } else {
            this.IssafeBtn = false;
          }
        }
        // 预约时间
        this.orderAppointmentTime =
          this.showOrderDay(this.getTaxiOrderInfoData.expect_date) +
          this.showOrderTime(moment(this.getTaxiOrderInfoData.expect_date, 'x'));
        if (this.getTaxiOrderInfoData.coupon_type === '1') {
          // 默认使用优惠券
          this.favourable = this.getTaxiOrderInfoData.coupon_info.favourable;
          this.Iscoupon = '1';
        } else if (this.getTaxiOrderInfoData.coupon_type === '2') {
          // 有可用优惠券 未使用
          this.Iscoupon = '2';
        } else if (this.getTaxiOrderInfoData.coupon_type === '3') {
          // 没有优惠券
          this.Iscoupon = '3';
        }
        // 判断取消订单是否有责
        this.duty = this.getTaxiOrderInfoData.duty;
        // if (this.duty === "0" || this.duty === "1") {
        //     this.isdutyShow = true;
        // } else if (this.duty === "2") {
        //     this.isdutyShow = false;
        // }
      });
    },
    // 费用有误
    costError() {
      Dialog.confirm({
        title: '费用有误',
        content: '费用有误通知司机修改行程费用',
        confirmText: '是',
        cancelText: '否',
        onConfirm: () => {
          let params = {
            order_no: this.$route.query.orderno
          };
          Loading.show();
          http.post('/pakj/utaxi/refusePay', params).then(res => {
            Loading.hide();
            if (res.data.code === '000000') {
              this.getTaxiOrder(this.$route.query.orderno);
            } else {
              Dialog.alert({
                title: '提示',
                content: res.data.msg,
                confirmText: '确定'
              });
            }
          });
        }
      });
    },
    getDay(time) {
      var times = new Date(time);
      var hour = times.getHours();
      var minute = times.getMinutes();
      return this.add(hour) + ':' + this.add(minute);
    },
    add(m) {
      return m < 10 ? '0' + m : m;
    },
    // 联系司机
    callDriver() {
      window.location.href = 'tel://' + this.getTaxiOrderInfoData.driver_phone;
    },
    // 联系客服
    callCustomer() {
      window.location.href = 'tel://' + this.getTaxiOrderInfoData.service_phone;
    },
    selectStart() {
      Popup.selectStartPosition().then(position => {
        this.$emit('changeStartPosition', position);
      });
    },
    selectEnd() {
      Popup.selectEndPosition().then(position => {
        this.$emit('changeEndPosition', position);
      });
    },
    tripBtn(index) {
      if (index === 0) {
        // 现在
        sessionStorage['taxiType'] = '1';
        this.taxiType = '1';
        this.appointment = false;
        sessionStorage.removeItem('appointmentTimeStamp');
        sessionStorage.removeItem('appointmentTime');
        this.appointmentTimeStamp = '';
      } else if (index === 1) {
        // 预约
        sessionStorage['taxiType'] = '2';
        this.taxiType = '2';
        this.appointment = true;
        this.appointmentTime = '预约时间';
      }
    },
    // gettaxiTypePrice() {
    //     this.taxiValuationNumber = '2';
    // },
    // gettaxiTypeValuation() {
    //     this.taxiValuationNumber = '1';
    // },
    pullUpPay() {
      // 拉起支付方式
      Popup.createPayTypeSelector().then(data => {
        sessionStorage.clear('couponType'); // 支付成功后 清除优惠券选中样式
        this.getTaxiOrder(this.$route.query.orderno);
      });
    },
    goTaxiEvaluate() {
      // 去评价
      Popup.createEvaluateSelector().then(data => {
        // this.$store.commit("resetTaxi");
        this.Isevaluate = false;
      });
    },
    seeTaxiEvaluate() {
      // 查看评价
      if (this.$route.query.orderno) {
        this.getTaxiOrderInfo(this.$route.query.orderno).then(() => {
          Popup.createSeeEvaluateSelector().then(() => {});
        });
      }
    },
    // 费用明细
    taxiCost() {
      if (this.getTaxiOrderInfoData.coupon_type === '2') {
        this.$router.push({
          name: 'taxichargesDetails',
          query: {
            orderno: this.$route.query.orderno,
            user_coupon_id: ''
          }
        });
      } else {
        this.$router.push({
          name: 'taxichargesDetails',
          query: {
            orderno: this.$route.query.orderno,
            user_coupon_id: this.getTaxiOrderInfoData.coupon_id
          }
        });
      }
    },
    // 优惠券
    getCoupon() {
      this.$router.push({
        name: 'taxiCoupon',
        query: {
          orderno: this.$route.query.orderno
        }
      });
    },
    // 订单已关闭
    // taxiOrderClose() {
    //     if (this.getTaxiOrderInfoData.order_status === '8') {
    //         this.IsTaxiOrder = false;
    //         this.IsTaxiDriver = false;
    //         this.taxiStatus = '6';
    //         this.$store.commit('setTaxiOrderStatus', '8'); // 订单状态
    //     }
    // },
    getappointmentTime() {
      // 获取预约时间
      this.getappointment().then(() => {
        Popup.createTimeSelector().then(data => {
          if (data.momstart._i) {
            var time = this.getDay(data.momstart);
            sessionStorage['appointmentTime'] = data.day + time;
            sessionStorage['appointmentTimeStamp'] = data.momstart.format('x').toString();
            this.appointmentTimeStamp = data.momstart.format('x').toString();
            this.appointmentTime = data.day + time;
            sessionStorage['taxiType'] = '2';
          } else {
            sessionStorage['taxiType'] = '1';
            sessionStorage.removeItem('appointmentTimeStamp');
            sessionStorage.removeItem('appointmentTime');
            this.appointmentTimeStamp = '';
            this.appointmentTime = '现在';
          }
        });
      });
    },
    // 判断取消订单责任
    cancelTaxiResponsibility() {
      let params = {
        order_no: this.$route.query.orderno,
        userType: '1'
      };
      Loading.show();
      http.post('/pakj/utaxi/getCancleDuty', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          let content = res.data.data.tips;
          Dialog.confirm({
            title: '取消订单',
            content: content,
            confirmText: res.data.data.btn1,
            cancelText: res.data.data.btn2,
            onConfirm: () => {
              this.cancelTaxiOrder();
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    cancelTaxiOrder() {
      let params = {
        order_no: this.$route.query.orderno
      };
      Loading.show();
      http.post('/pakj/utaxi/cancleOrder', params).then(res => {
        Loading.hide();
        clearInterval(this.taxiOrderTimer);
        sessionStorage.removeItem('appointmentTimeStamp');
        sessionStorage.removeItem('appointmentTime');
        sessionStorage.removeItem('taxiType');
        this.taxiOrderTimer = null;
        if (res.data.code === '000000') {
          Dialog.alert({
            title: '提示',
            content: '订单取消成功',
            confirmText: '确定',
            onConfirm: () => {
              this.$store.commit('resetTaxi');
              this.$router.replace({
                name: 'taxitripCancel',
                query: {
                  orderno: this.$route.query.orderno
                }
              });
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 设置红包金额
    setRedMoneyBtn() {
      this.getRedMoney().then(() => {
        Popup.createRedMoneySelector().then(data => {
          console.log(data);
          this.redMoney = data;
        });
      });
    },
    // 修改红包金额
    modifyRedMoney() {
      this.getRedMoney().then(() => {
        var arr = this.getRedMoneyData.split(',');
        if (this.redMoney === arr[arr.length - 1]) {
          Dialog.alert({
            title: '提示',
            content: '当前红包已到最大值',
            confirmText: '确定'
          });
        } else {
          Popup.createModifyRedMoneySelector().then(data => {
            let params = {
              order_no: this.$route.query.orderno,
              reward_money: data
            };
            this.getModifyRedMoney(params).then(() => {
              this.getTaxiOrder(this.$route.query.orderno);
            });
          });
        }
      });
    },
    // 安全专线
    safeBtn() {
      window.location.href = '/taxi/taxisafe?orderno=' + this.$route.query.orderno;
    },
    // 手动获取定位
    dingweiBtn() {
      this.$emit('dingwei');
    },
    getshareTrip() {
      let params = {
        order_no: this.$route.query.orderno,
        type: '2'
      };
      Loading.show();
      http.post('/pakj/order/getShareOrderUrl', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.shareTripUrl = res.data.data.shareUrl;
          this.getshareConfig(res.data.data.shareUrl, res.data.data.shareTitle, res.data.data.shareDesc);
          // 判断是微信还是h5中
          if (Utils.isWeixinBroswer()) {
            //  微信中
            this.Issharebox = true;
          } else {
            this.Iscodebox = true;
            if (!this.qrcode) {
              this.qrcode = new QRCode(this.$refs.qrcode, {
                width: 120,
                height: 120, // 高度
                text: this.shareTripUrl // 二维码链接
              });
            }
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    getshareConfig(shareUrl, shareTitle, shareDesc) {
      weixinUtils
        .wxConfig([
          'onMenuShareTimeline', // 分享到朋友圈接口
          'onMenuShareAppMessage', //  分享到朋友接口
          'onMenuShareQQ', // 分享到QQ接口
          'onMenuShareQZone', // 分享到qq空间
          'onMenuShareWeibo' // 分享到微博接口
          // 'updateAppMessageShareData', // 分享给朋友及分享到QQ
          // 'updateTimelineShareData ' // 分享到朋友圈及分享到QQ空间
        ])
        .then(() => {
          let shareData = {
            imgUrl: 'https://img.padj.group/pakj_logo.png', // 分享显示的缩略图地址
            link: shareUrl, // 分享地址
            desc: shareTitle, // 分享描述
            title: shareDesc, // 分享标题
            success: () => {
              // Toast({
              //     icon: 'circle-right',
              //     content: '分享成功',
              //     position: 'bottom'
              // });
              this.sharecoverBtn();
            }
          };
          wx.onMenuShareTimeline(shareData);
          wx.onMenuShareAppMessage(shareData);
          wx.onMenuShareQQ(shareData);
          wx.onMenuShareQZone(shareData);
          wx.onMenuShareWeibo(shareData);
        })
        .catch(reason => {
          // config信息验证失败会执行error函数，如签名过期导致验证失败
          // 具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看
          // 对于SPA可以在这里更新签名
          alert('好像出错了');
        });
    },
    sharecoverBtn() {
      this.Issharecover = false;
      this.Iscodebox = false;
      this.Issharebox = false;
    },
    // 分享行程
    TaxishareBtn() {
      this.Issharecover = true;
      this.getshareTrip();
    },
    getappointmentDay(time) {
      var t = new Date(time);
      var times = new Date(t.setMinutes(t.getMinutes() + 5));
      var hour = times.getHours();
      var minute = times.getMinutes();
      return this.add(hour) + ':' + this.add(minute);
    },
    showOrderTime(time) {
      var t = new Date(time);
      var hour = t.getHours();
      var minute = t.getMinutes();
      return this.add(hour) + ':' + this.add(minute);
    },
    showOrderDay(time) {
      var day = '';
      let today0 = moment()
        .hours(0)
        .minutes(0)
        .seconds(0)
        .milliseconds(0);
      let today0Unix = today0.format('x');
      var days = Math.ceil((parseInt(time) - parseInt(today0Unix)) / (1000 * 60 * 60 * 24));
      if (days > 0) {
        if (days === 1) {
          day = '今天';
        } else if (days === 2) {
          day = '明天';
        } else if (days === 3) {
          day = '后天';
        }
      } else {
        let dispatchdate = moment(time, 'x');
        day = dispatchdate.calendar(null, {
          sameDay: '[今天]',
          nextDay: '[明天]',
          nextWeek: 'MMMDo',
          lastDay: '[昨天]',
          lastWeek: 'MMMDo',
          sameElse: 'MMMDo'
        });
      }
      return day;
    },
    onPopState() {
      clearInterval(this.taxiOrderTimer);
      this.$store.commit('setTaxiBottomType', '0');
      this.$store.commit('resetTaxi');
      this.$store.commit('resetTaxiEndPosition');
    }
  },
  computed: {
    ...mapGetters([
      'taxiStartPosition',
      'taxiEndPosition',
      'getTaxiOrderInfoData',
      'getCallTaxiData',
      'getTaxiStatus',
      'getTaxiBottomType',
      'getTaxiValuationMethod',
      'getRedMoneyData',
      'taxiNearDrivers',
      'getTtaxiDoOrderData'
    ]),
    getDriverCompany() {
      var str = this.getTaxiOrderInfoData;
      if (!str) {
        return '';
      }
      if (str.operation_company.length > 16) {
        return str.operation_company.substring(0, 16) + '...';
      } else {
        return str.operation_company;
      }
    },
    cancelTime() {
      var str = this.getTaxiOrderInfoData;
      if (!str) {
        return '';
      }
      var autocancleminute = this.getTaxiOrderInfoData.auto_cancle_minute; // 无责取消时间
      let dispatchdate = moment(this.getTaxiOrderInfoData.dispatch_date, 'x');
      dispatchdate.add(autocancleminute, 'minutes');
      let startMoment = dispatchdate.calendar(null, {
        sameDay: '[今天] HH:mm',
        nextDay: '[明天] HH:mm',
        nextWeek: 'MMMDo HH:mm',
        lastDay: '[昨天] HH:mm',
        lastWeek: 'MMMDo HH:mm',
        sameElse: 'MMMDo HH:mm'
      });
      return startMoment;
    },
    meetedDate() {
      var str = this.getTaxiOrderInfoData;
      if (!str) {
        return '';
      }
      let dispatchdate = moment(this.getTaxiOrderInfoData.meeted_date, 'x');
      dispatchdate.add(5, 'minutes');
      let date = dispatchdate.calendar(null, {
        sameDay: '[今天] HH:mm',
        nextDay: '[明天] HH:mm',
        nextWeek: 'MMMDo HH:mm',
        lastDay: '[昨天] HH:mm',
        lastWeek: 'MMMDo HH:mm',
        sameElse: 'MMMDo HH:mm'
      });
      return date;
    },
    appointmentmeetedDate() {
      var str = this.getTaxiOrderInfoData;
      if (!str) {
        return '';
      }
      console.log();
      let date =
        this.showOrderDay(this.getTaxiOrderInfoData.expect_date) +
        this.getappointmentDay(moment(this.getTaxiOrderInfoData.expect_date, 'x'));
      return date;
    },
    // 判断附近是否有出租车
    getDriverCard() {
      var str = this.taxiNearDrivers;
      let DriverCard = null;
      if (!str) {
        return '';
      }
      if (str.length > 0) {
        // 有车
        DriverCard = true;
      } else {
        DriverCard = false;
      }
      return DriverCard;
    }
  }
};
</script>

<style lang="stylus" scoped>
#taxiBottom {
  p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  h6, h5 {
    display: block;
    font-size: 22px;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: 400;
  }

  .sharecover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    background-color: #000;
    opacity: 0.5;
    z-index: 9999;
  }

  .code_box {
    position: absolute;
    z-index: 10000;
    top: 35%;
    left: 35%;
  }

  .qrcode_text {
    font-size: 28px;
    color: #fff;
    marign-top: 20px;
  }

  .share_box {
    position: absolute;
    z-index: 10000;
    right: 2%;
    font-size: 28px;
    color: #fff;
    width: 240px;
  }

  .share_box img {
    width: 120px;
    position: relative;
    left: 100px;
  }

  .share_box p {
    margin-top: 10px;
  }

  .taxi_back_box {
    position: absolute;
    top: 0;
    z-index: 501;
    width: 100%;
  }

  .taxi_back_box p {
    height: 88px;
    line-height: 88px;
    padding: 0px 30px;
  }

  .taxibottom_tab {
    background-color: #fff;
  }

  .taxiBottom_bg {
    position: absolute;
    bottom: 20px;
    z-index: 501;
    width: 100%;
  }

  .taxi_bg {
    background-color: #fff;
    border-radius: 10px;
    margin: 0px 20px;
  }

  .safe_box {
    margin: 10px 20px;
  }

  .dingwei_img {
    float: right;
  }

  .safe_box_img {
    text-align: left;
  }

  .safe_box img {
    width: 56px;
    height: 56px;
  }

  .orderinformation_list {
    position: relative;
  }

  .orderinformation_list li {
    margin: 0px 30px;
    font-size: 26px;
    color: #666;
    height: 88px;
    line-height: 88px;
    border-bottom: solid 1px #E0E0E0;
  }

  .orderinformation_list li span {
    margin-left: 10px;
  }

  .orderinformation_list li span.address_color {
    color: #999;
  }

  .snkc_xcqx_time {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: relative;
    bottom: 1px;
  }

  .shangchedian {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: relative;
    bottom: 3px;
  }

  .taxi_img {
    text-align: center;
    padding-top: 10px;
  }

  .taxi_img img {
    width: 195px;
    height: 65px;
  }

  .taxi_meter_valuation {
    padding-top: 30px;
    font-size: 24px;
    color: #666;
    text-align: center;
  }

  .taxi_type {
    padding-top: 20px;
    font-size: 24px;
    color: #666;
    padding-bottom: 30px;
    border-bottom: solid 1px #E0E0E0;
  }

  .taxi_type span {
    width: 50%;
    display: inline-block;
    text-align: center;
  }

  .taxi_type span i {
    display: inline-block;
    background-color: #fff;
    width: 28px;
    height: 28px;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    position: relative;
    top: 8px;
  }

  .taxi_type span i.active {
    background: url('../../assets/imgs/ddzf_icon_pre@2x.png') no-repeat center center;
    background-size: contain;
    border-color: #fff;
    width: 28px;
    height: 28px;
  }

  .taxi_type span b {
    font-weight: 400;
    margin-left: 10px;
  }

  .red_money {
    text-align: center;
    height: 88px;
    line-height: 88px;
    font-size: 24px;
    color: #666;
  }

  .red_money img {
    width: 20px;
    height: 20px;
    position: relative;
    top: 3px;
  }

  .red_money span {
    margin-left: 10px;
  }

  .red_money b {
    color: #FF6917;
    font-weight: 400;
  }

  .appointment_taxi_time {
    text-align: center;
    height: 88px;
    line-height: 88px;
    font-size: 24px;
    color: #666;
  }

  .taxi_btn {
    height: 98px;
    line-height: 98px;
    font-size: 36px;
    color: #fff;
    text-align: center;
    background-color: #FF6917;
  }

  .taix_wait_text {
    text-align: center;
    font-size: 26px;
    color: #666;
    padding: 20px 0px;
  }

  .taix_wait_type {
    text-align: center;
    font-size: 24px;
    color: #999;
  }

  .taix_wait_time {
    text-align: center;
    font-size: 40px;
    color: #333;
    margin: 20px 0px;
  }

  .taix_wait_no {
    text-align: center;
    font-size: 20px;
    color: #999;
  }

  .taix_wait_list {
    margin-top: 20px;
    height: 88px;
    line-height: 88px;
    border-top: solid 1px #E0E0E0;
    font-size: 24px;
    color: #666;
  }

  .taix_wait_list span {
    width: 50%;
    display: inline-block;
    text-align: center;
    position: relative;
  }

  .taix_wait_list span img {
    width: 20px;
    height: 20px;
    position: relative;
    top: 3px;
    right: 10px;
  }

  .taix_wait_list span em {
    width: 1px;
    height: 68px;
    display: inline-block;
    background-color: #E0E0E0;
    position: absolute;
    right: 0px;
    top: 10px;
  }

  .taix_wait_list span b {
    color: #ff6917;
    font-weight: 400;
  }

  .appointment_taix_wait_time {
    text-align: center;
    height: 88px;
    line-height: 88px;
    font-size: 26px;
    color: #666;
    border-bottom: solid 1px #E0E0E0;
  }

  .appointment_taix_wait_time span {
    color: #FF6917;
  }

  .taxi_djj_hd {
    font-size: 36px;
    color: #333;
    padding: 20px 0px;
    text-align: center;
  }

  .taxi_djj_text {
    color: #999;
    font-size: 20px;
    text-align: center;
  }

  .taxi_djj_text span {
    color: #FF6917;
  }

  .taxi_driver_box {
    height: 160px;
    margin-top: 20px;
    border-bottom: solid 1px #E0E0E0;
    border-top: solid 1px #E0E0E0;
  }

  .taxi_driver_box_left {
    float: left;
    margin-left: 30px;
    margin-top: 30px;
  }

  .taxi_driver_box_left p img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .taxi_driver_box_center {
    float: left;
    margin-top: 30px;
    margin-left: 20px;
  }

  .taxi_driver_box_center p {
    margin-top: 10px;
  }

  .taxi_driver_text span {
    font-size: 30px;
    color: #333;
  }

  .taxi_driver_text b {
    margin-left: 10px;
    background-color: #FF6917;
    font-size: 20px;
    color: #fff;
    padding: 5px 6px;
    font-weight: 400;
  }

  .taxi_driver_text em {
    font-size: 24px;
    color: #666;
    font-style: normal;
  }

  .taxi_driver_text em i {
    color: #FF5C00;
    margin: 0px 5px;
    font-style: normal;
  }

  .taxi_company_text {
    font-size: 24px;
    color: #666;
  }

  .taxi_driver_box_right {
    float: right;
    margin-top: 60px;
    margin-right: 30px;
  }

  .taxi_driver_box_right p img {
    width: 44px;
    height: 44px;
  }

  .taxi_driver_box_right span {
    margin-left: 10px;
  }

  .orderinformation_bottom {
    padding: 0px 30px;
  }

  .orderinformation_bottom ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .orderinformation_bottom ul li {
    margin-top: 30px;
    font-size: 24px;
    color: #666;
    padding-bottom: 30px;
  }

  .quxiao_icon {
    width: 24px;
    height: 24px;
    position: relative;
    top: 3px;
    margin-right: 8px;
  }

  .wdqb_more {
    width: 24px;
    height: 24px;
    position: relative;
    bottom: 4px;
    margin-right: 15px;
  }

  .taxi_driver_comfirm {
    font-size: 36px;
    color: #333;
    text-align: center;
    padding: 76px 0px;
  }

  .endOrder_bottom {
    border-top: solid 1px #E0E0E0;
    margin-top: 24px;
    height: 88px;
    line-height: 88px;
  }

  .endOrder_bottom ul li {
    width: 50%;
    float: left;
    font-size: 24px;
    color: #666;
    text-align: center;
  }

  .taxi_pay {
    background-color: #ff6917;
    height: 98px;
    line-height: 98px;
    font-size: 36px;
    color: #fff;
    text-align: center;
  }

  .taxi_alt {
    color: #333;
    text-align: center;
    padding-top: 40px;
    font-size: 30px;
  }

  .taxi_alt span {
    font-size: 40px;
  }

  .taxi_coupon {
    color: #999;
    text-align: center;
    padding-top: 20px;
    font-size: 24px;
  }

  .taxi_coupon span {
    color: #ff6917;
  }

  .taxi_cost_text {
    color: #666;
    text-align: center;
    margin-top: 34px;
    font-size: 22px;
  }

  .taxi_order_close_img {
    text-align: center;
    padding-top: 60px;
  }

  .taxi_order_close_img img {
    width: 80px;
    height: 80px;
  }

  .taxi_order_close_hd {
    font-size: 36px;
    color: #333;
    text-align: center;
    padding-top: 20px;
  }

  .taxi_order_close_text {
    font-size: 20px;
    color: #999;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 30px;
  }

  .place_icon {
    width: 20px;
    height: 20px;
  }

  .taxi_evaluate {
    text-align: center;
    font-size: 26px;
    color: #ff6917;
    height: 98px;
    line-height: 98px;
    border-top: solid 1px #E0E0E0;
  }

  .back_btn {
    width: 22px;
    height: 38px;
  }

  .taxi_list_box {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .taxi_list {
    width: 100%;
    height: 250px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px 0px rgba(230, 229, 229, 1);
  }

  .taxi_list.ative {
    border-bottom: solid 1px #FF6917;
  }

  .taxi_list p {
    text-align: center;
  }

  .taxi_list h5 {
    padding-top: 10px;
    font-size: 26px;
    color: #666;
    font-weight: 400;
    text-align: center;
  }

  .taxi_list h6 {
    font-size: 24px;
    color: #666;
    font-weight: 400;
    text-align: center;
    margin-top: 10px;
  }

  .taxi_coupon_text {
    font-size: 18px;
    color: #999;
    margin-top: 10px;
    margin-bottom: 15px;
  }

  .taxi_coupon_text span {
    color: #FF6917;
  }
}
</style>
